<!-- 分类的内容模块 -->
<template>
  <div class="category-content">
    <div class="left">
      <ul>
        <li
          v-for="(cateTitleData, index) in cateTitleDatas"
          :key="index"
          :class="activeIndex == index ? 'active' : ''"
          @click="activeFun(index, cateTitleData.cat_id)"
        >
          {{ cateTitleData.cat_name }}
        </li>
      </ul>
    </div>
    <div class="right">
      <mt-loadmore
        :top-method="loadTop"
        :bottom-method="loadBottom"
        ref="loadmore"
      >
        <div class="ad">
          <img :src="ad_img" alt="" />
        </div>
        <div class="list-wrap">
          <ul class="list">
            <li
              v-for="cateRightData in cateRightDatas"
              :key="cateRightData.cat_id"
            >
              <h4>{{ cateRightData.cat_name }}</h4>
              <ul>
                <li
                  v-for="item in cateRightData.child"
                  :key="item.id"
                  @click="toGoodsList(item.cat_id, item.cat_name)"
                >
                  <img :src="item.touch_icon" alt="" />
                  <p>{{ item.cat_name }}</p>
                </li>
              </ul>
            </li>
          </ul>
        </div>
      </mt-loadmore>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import { CategoryLeftApi, CategoryRightApi } from "@/api/category.js";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      cateTitleDatas: [],
      cateRightDatas: [
        {
          cate_id: 1,
          cate_name: "厨房电器",
          child: [
            {
              id: "111",
              pic: "https://x.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1489105257655.jpg",
              title: "电饭煲",
            },
            {
              id: "222",
              pic: "https://x.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1489105257655.jpg",
              title: "电饭煲",
            },
            {
              id: "333",
              pic: "https://x.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1489105257655.jpg",
              title: "电饭煲",
            },
            {
              id: "444",
              pic: "https://x.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1489105257655.jpg",
              title: "电饭煲",
            },
            {
              id: "555",
              pic: "https://x.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1489105257655.jpg",
              title: "电饭煲",
            },
            {
              id: "666",
              pic: "https://x.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1489105257655.jpg",
              title: "电饭煲",
            },
            {
              id: "777",
              pic: "https://x.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1489105257655.jpg",
              title: "电饭煲",
            },
          ],
        },
        {
          cate_id: 2,
          cate_name: "大家电",
          child: [
            {
              id: "1111",
              pic: "https://x.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1489105386951.jpg",
              title: "电饭煲",
            },
            {
              id: "2222",
              pic: "https://x.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1489105386951.jpg",
              title: "电饭煲",
            },
            {
              id: "3333",
              pic: "https://x.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1489105257655.jpg",
              title: "电饭煲",
            },
            {
              id: "4444",
              pic: "https://x.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1489105257655.jpg",
              title: "电饭煲",
            },
            {
              id: "5555",
              pic: "https://x.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1489105257655.jpg",
              title: "电饭煲",
            },
            {
              id: "6666",
              pic: "https://x.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1489105257655.jpg",
              title: "电饭煲",
            },
            {
              id: "7777",
              pic: "https://x.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1489105257655.jpg",
              title: "电饭煲",
            },
          ],
        },
        {
          cate_id: 3,
          cate_name: "个护健康",
          child: [
            {
              id: "11111",
              pic: "https://x.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1490204113895.jpg",
              title: "电饭煲",
            },
            {
              id: "22222",
              pic: "https://x.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1490204113895.jpg",
              title: "电饭煲",
            },
            {
              id: "33333",
              pic: "https://x.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1489105257655.jpg",
              title: "电饭煲",
            },
            {
              id: "44444",
              pic: "https://x.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1489105257655.jpg",
              title: "电饭煲",
            },
            {
              id: "55555",
              pic: "https://x.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1489105257655.jpg",
              title: "电饭煲",
            },
            {
              id: "66666",
              pic: "https://x.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1489105257655.jpg",
              title: "电饭煲",
            },
            {
              id: "77777",
              pic: "https://x.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1489105257655.jpg",
              title: "电饭煲",
            },
          ],
        },
      ],
      ad_img:
        "https://x.dscmall.cn/storage/data/touch_catads/15630384831872.jpg",
      activeIndex: 0,
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    activeFun(index, cat_id) {
      this.activeIndex = index;
      this.ad_img = this.cateTitleDatas[index].touch_catads;
      this.getRightDatas(cat_id);
    },
    loadTop() {
      this.$refs.loadmore.onTopLoaded();
    },
    loadBottom() {
      this.$refs.loadmore.onBottomLoaded();
    },
    // 进入list页面
    toGoodsList(cat_id, cat_name) {
      this.$router.push("/goodslist/" + cat_id + "?title=" + cat_name);
    },
    // 封装调用右边的数据的函数
    getRightDatas(cat_id) {
      CategoryRightApi(cat_id).then((res) => {
        this.cateRightDatas = res.data.data;
        console.log(this.cateRightDatas);
      });
    },
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    // 初始化左边的数据
    CategoryLeftApi().then((res) => {
      console.log(res.data);
      this.cateTitleDatas = res.data.data;
    });
    // 初始化右边的数据
    this.getRightDatas(858);
  },
};
</script>
<style lang="less">
.category-content {
  width: 100%;
  height: calc(100% - 10rem);
  position: absolute;
  top: 5rem;
  left: 0;
  display: flex;
  .left {
    width: 8.5rem;
    height: 100%;
    background-color: #f4f4f4;
    ul {
      li {
        height: 3.8rem;
        line-height: 3.8rem;
        text-align: center;
        font-size: 1.3rem;
      }
      .active {
        background-color: #fff;
        color: #f23030;
        display: flex;
        &::before {
          content: "";
          width: 0.25rem;
          height: 60%;
          margin: 0.8rem 1rem 0 0;
          background-color: #f23030;
          display: block;
        }
      }
    }
  }
  .right {
    width: calc(100% - 8.5rem);
    height: 100%;
    overflow: auto;
    background-color: #fff;
    // 广告图
    .ad {
      width: 27rem;
      height: 9rem;
      margin: 1rem 0 0 1rem;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .list-wrap {
      // ul:样式
      .list {
        li {
          h4 {
            text-align: center;
            height: 2.5rem;
            line-height: 2.5rem;
            font-size: 1.3rem;
            font-weight: 500;
            color: #666;
          }
          ul {
            display: flex;
            flex-wrap: wrap;
            margin-top: 1rem;
            li {
              width: 33%;
              text-align: center;
              img {
                width: 5.2rem;
                height: 5.2rem;
              }
            }
          }
        }
      }
    }
  }
  //   使滚动条隐藏
  .right::-webkit-scrollbar {
    display: none;
  }
}
</style>